<template>
  <div class="rating">
    <i v-for="(item,index) in itemClass" :key="index" :class="item"></i>
  </div>
</template>
<script>
//at.alicdn.com/t/font_3048571_9pipwq8y69p.css   阿里云样式
const Length = 5
const class_on = 'iconfont icon-B-pingfen' //全星
const class_half = 'iconfont icon-star-half' //半星
const class_empty = 'iconfont icon-pingfen half-start' //空
export default {
  props: {
    rating: Number
  },
  name: 'Rating',
  data () {
    return {
    }
  },
  computed: {
    itemClass () {
      let result = []
      //对分数进行处理,向下取0.5的倍数
      let scroe = Math.floor(this.rating * 2) / 2

      //不等于0 是半星
      let hasDecimal = scroe % 1 !== 0

      // 全星
      let interger = Math.floor(scroe)

      //全星放到数组中
      for (let i = 0; i < interger; i++) {
        result.push(class_on)
      }

      //半星
      if (hasDecimal) {
        result.push(class_half)
      }

      //补全
      while (result.length < Length) {
        result.push(class_empty)
      }
      return result
    }
  },
  methods: {
  },
}
</script>
<style  scoped>
.rating {
  display: inline-block;
}
.rating i {
  font-size: 0.2rem;
  color: gold;
}
</style>
